<template>
  <view class="uv-page" style="background-color: #fff;">
    <view class="uv-demo-block">
      <view class="uv-demo-block__content">
        <uv-form :model="form" ref="form1" labelWidth="auto">
          <uv-form-item prop="title" label="标题:" borderBottom>
            <uv-input v-model="form.title" border="none" placeholder="请填写标题"></uv-input>
          </uv-form-item>
          <uv-form-item prop="content" label="内容:" borderBottom >
            <uv-text :text="form.content" type="info"></uv-text>
          </uv-form-item>
          <uv-form-item prop="createTime" label="日期:" borderBottom>
            <uv-input v-model="form.createTime" border="none"></uv-input>
          </uv-form-item>
          <uv-form-item prop="enclosure" label="附件:" borderBottom>

            <uv-album v-if="fileList1.length>0" :urls="fileList1" maxCount="3" multipleSize="160rpx"
                      singleSize="160rpx" space="8rpx"></uv-album>
          </uv-form-item>
          <uv-form-item prop="userName" label="发布人:" borderBottom>
            <uv-input v-model="form.userName" border="none"></uv-input>
          </uv-form-item>
		  <uv-form-item prop="isAllUser" label="用户:" borderBottom>
		    <uv-radio-group v-model="form.isAllUser" disabled>
		      <uv-radio :name="1" label="所有人" key="1"></uv-radio>
		      <uv-radio :name="2" label="自定义" key="2"></uv-radio>
		    </uv-radio-group>
		  </uv-form-item>
          <uv-form-item prop="users" label="通知用户:" borderBottom labelPosition="top" v-if="form.isAllUser===2">
            <view  class="tags-container">
              <view class="tag-item" v-for="item in form.users">
                <uv-tags :text="item.name" size="mini" plain ></uv-tags>
              </view>
            </view>
          </uv-form-item>
          <uv-form-item prop="readUsers" label="已读用户:" borderBottom labelPosition="top">
            <view  class="tags-container">
              <view class="tag-item" v-for="item in form.readUsers">
              <uv-tags :text="item.name" size="mini" plain ></uv-tags>
              </view>
            </view>
          </uv-form-item>
        </uv-form>
        <view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

import NoticeAPI from '@/api/notice'

export default {
  data() {
    return {
      form: {
        enclosure: '',
        content: '',
        title: '',
        createTime: '',
        userName: '',
        readUsers: [],
        users: [],
        isAllUser: 1
      },
      fileList1:[]

    }
  },
  onLoad(e) {
    this.id = e.id
    this.detail(this.id)
  },
  methods: {
    detail() {
      NoticeAPI.noticeDetail({
        id: this.id
      }).then(res => {
        console.log(res.data);
        this.form = res.data
        // 示例图
        this.fileList1 = this.form.enclosure?.split(',')
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.uv-page {
  padding: 15px 15px 40px 15px;
}

.uv-demo-block {
  margin-bottom: 22px;
}

.uv-demo-block__title {
  font-size: 14px;
  color: #8f9ca2;
  margin-bottom: 8px;
}

.uv-demo-block__title {
  font-size: 14px;
  color: #8f9ca2;
  margin-bottom: 8px;
}

.uv-demo-block__content {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  margin: 1px; /* 根据需要调整间距 */
}
</style>